﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.Master" AutoEventWireup="true"
	CodeBehind="ClientModel.aspx.cs" Inherits="ControlExplorer.C1Expander.ClientModel" %>

<%@ Register Assembly="C1.Web.Wijmo.Controls.3" Namespace="C1.Web.Wijmo.Controls.C1Expander"
	TagPrefix="C1Expander" %>
<%@ Register Src="../ClientLogger.ascx" TagName="ClientLogger" TagPrefix="ClientLogger" %>
<asp:Content ID="Content1" ContentPlaceHolderID="Head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<ClientLogger:ClientLogger ID="ClientLogger1" runat="server" />
	<C1Expander:C1Expander runat="server" ID="C1Expander1">
		<Header>
			头部
		</Header>
		<Content>
			Wijmo Expander控件提供了展开和折叠内容面板的功能，并且支持动画显示效果。
		</Content>
	</C1Expander:C1Expander>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" runat="server">
<p>此示例展示了如何使用客户端脚本来更改扩展器的动作和外观。</p>
<p>&nbsp;</p>
<p>以下的客户端选项在示例中被使用:</p>
<ul>
<li><strong>expanded -</strong>决定内容面板的可视性状态。如果为True，内容元素是可见的</li>
<li><strong>allowExpand -</strong> 决定小部件是否可以扩展。如果您想要禁用收缩/扩展功能，把这个选项设为False。</li>
<li><strong>expandDirection -</strong> 决定内容扩展方向。可选的值为顶部、右边、底部和左边。</li>
</ul>
<p>在此示例中使用了以下客户端事件：</p>
<ul>
<li><strong>beforeCollapse</strong> - 在内容框收缩之前发生。返回false或者调用event.preventDefault()来取消事件或者阻止内容框的收缩。</li>
<li><strong>beforeExpand -</strong> - 在内容框扩展之前发生。返回false或者调用event.preventDefault()来取消事件或者阻止内容框的扩展。</li>
<li><strong>afterCollapse </strong>- 在内容框收缩之后发生。</li>
<li><strong>afterExpand </strong>- 在内容框扩展之后发生。</li>
</ul>

</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" runat="server">
	<p>
		<label>
			初始扩展
			<input type="checkbox" id="expandedOption" /></label>
	</p>
	<p>
		<label>扩展方向：
		<select id="expandDirectionOption">
			<option value="top" selected="selected">顶部</option>
			<option value="right">右边</option>
			<option value="bottom">底部</option>
			<option value="left">左边</option>
		</select>
		</label>
	</p>
	<p>
		<label>
			是否允许扩展<input type="checkbox" id="allowExpandOption" /></label>
	</p>
	<p>
		<label>
			绑定/不绑定收缩事件<input type="checkbox" id="bindCollapseEvents" /></label>
	</p>
	<p>
		<label>
			绑定/不绑定扩展事件<input type="checkbox" id="bindExpandEvents" /></label>
	</p>
	<script language="javascript" type="text/javascript">
		$(document).ready(
		function () {
			$("#expandedOption")[0].checked = $("#<%=C1Expander1.ClientID%>").c1expander("option", "expanded");
			$("#allowExpandOption")[0].checked = $("#<%=C1Expander1.ClientID%>").c1expander("option", "allowExpand");
			$("#expandDirectionOption").val($("#<%=C1Expander1.ClientID%>").c1expander("option", "expandDirection"));
			//$("#expander").wijexpander("option", "expandDirection", $("#expandDirectionOption").get(0).value);
			$("#expandedOption").change(function () {
				var expanded = $("#expandedOption")[0].checked;
				$("#<%=C1Expander1.ClientID%>").c1expander("option", "expanded", expanded);
				log.message("初始扩展改为 " + expanded);
			})

			$("#allowExpandOption").change(function () {
				var allowExpand = $("#allowExpandOption")[0].checked;
				$("#<%=C1Expander1.ClientID%>").c1expander("option", "allowExpand", allowExpand);
				log.message("是否允许扩展改为 " + allowExpand);
			});

			$("#expandDirectionOption").change(function () {
				var selectedDir = $("#expandDirectionOption").val();
				$("#<%=C1Expander1.ClientID%>").c1expander("option", "expandDirection", selectedDir);
				log.message("扩展方向改为 " + selectedDir);
			})

			$("#bindExpandEvents").change(function () {
				if ($("#bindExpandEvents")[0].checked) {
					$("#<%=C1Expander1.ClientID%>").bind("c1expanderbeforeexpand.sampleExpandEvents", function (e) {
					    log.message("beforeExpand 事件被激发。");
						/*if (confirm("Do you want to cancel beforeExpand event?")) {
						e.preventDefault();
						}*/
					}).bind("c1expanderafterexpand.sampleExpandEvents", function () {
					    log.message("afterExpand 事件被激发。");
					});
				} else {
					$("#<%=C1Expander1.ClientID%>").unbind(".sampleExpandEvents");
				}
			});

			$("#bindCollapseEvents").change(function () {
				if ($("#bindCollapseEvents")[0].checked) {
					$("#<%=C1Expander1.ClientID%>").bind("c1expanderbeforecollapse.sampleCollapseEvents", function (e) {
					    log.message("beforeCollapse 事件被激发。。");
						/*if (confirm("Do you want to cancel beforeCollapse event?")) {
						e.preventDefault();
						}*/
					}).bind("c1expanderaftercollapse.sampleCollapseEvents", function () {
						log.message("afterCollapse 事件被激发。");
					});
				} else {
					$("#<%=C1Expander1.ClientID%>").unbind(".sampleCollapseEvents");
				}
			});
		}
		);
	</script>
</asp:Content>
